<template>
	<view class="popup">
		<view class="popup-mask"></view>
		<view class="popup-content">
			<view class="container">
				<slot></slot>
			</view>
			<view class="popup-footer">
				<view v-if="hasConfirm" class="submit-btn" @click="onConfirm">{{ confirmTitle }}</view>
				<view v-if="hasCancel" class="cancel-btn gradient-text" @click="onCancel">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"popup",
		
		props: {
			confirmTitle: {
				type: String,
				default: () => '确认'
			},
			
			hasConfirm: {
				type: Boolean,
				default: () => true
			},
			
			hasCancel: {
				type: Boolean,
				default: () => true
			}
		},
		
		methods: {
			onConfirm() {
				this.$emit('confirm')
			},
			
			onCancel() {
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss">
.popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	
	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
	}
	
	.popup-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,  -50%);
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		z-index: 1;
		
		.container {
			padding: 20rpx;
		}
		
		.popup-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 81rpx;
			line-height: 81rpx;
			text-align: center;
			font-size: 40rpx;
			
			view {
				position: relative;
				flex: 1;
				border-radius: 0;
				
				&::after {
					content: '';
					position: absolute;
					top: 1rpx;
					left: 0;
					right: 0;
					height: 1rpx;
					background-image: linear-gradient(to right, #60d8d2, #478ce4);
				}
			}
		}
	}
}
</style>
